<script setup lang="ts">
import {jStorage} from 'jzutil';
import {ref, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {ElMessage} from 'element-plus';
const router = useRouter();
const route = useRoute();
const pageEditing = ref(false);
const cancelText = computed(() => {
    const {id} = route.query;
    return id ? '返回' : '取消';
});
const handelCancel = () => {
    router.back();
};
const showSave = computed(() => {
    const {id} = route.query;
    if (!id) {
        return true;
    } else {
        return pageEditing.value;
    }
});
const cards = ref<any[]>([]);
const formData = ref<any>({
    name: '',
    price: 0,
    time: 1,
    count: 100,
    hightCount: 14,
    sendLimit: '仅送精修',
    serveLimit: '服装自备'
});
const handelSubmit = () => {
    const levels = jStorage.getLocal('levels') || [];
    levels.push(formData.value);
    jStorage.setLocal('levels', levels);
    ElMessage.success({
        message: '保存成功',
        type: 'success',
        duration: 1000
    });
    handelCancel();
};
(() => {
    cards.value = jStorage.getLocal('card') || [];
})();
</script>
<template>
    <el-container class="swiper-detail">
        <el-main>
            <el-form label-position="left" label-width="100px" :model="formData">
                <el-form-item label="名称:">
                    <el-input v-model="formData.name" placeholder="请输入名称" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="价格:">
                    <el-input-number placeholder="请输入价格" v-model="formData.price"></el-input-number>
                </el-form-item>
                <el-form-item label="项目:">
                    <el-input placeholder="请输入时间" v-model="formData.time" class="sub-item">
                        <template #prepend>时间</template>
                        <template #suffix>
                            <span class="el-input__icon">小时</span>
                        </template>
                    </el-input>
                    <el-input placeholder="请输入数量" v-model="formData.count" class="sub-item">
                        <template #prepend>数量</template>
                        <template #suffix>
                            <span class="el-input__icon">张</span>
                        </template>
                    </el-input>
                    <el-input placeholder="请输入精修数量" v-model="formData.hightCount" class="sub-item">
                        <template #prepend>精修数量</template>
                        <template #suffix>
                            <span class="el-input__icon">张</span>
                        </template>
                    </el-input>
                    <el-input placeholder="请输入" v-model="formData.sendLimit" class="sub-item">
                        <template #prepend>送</template>
                    </el-input>
                    <el-input placeholder="请输入" v-model="formData.serveLimit" class="sub-item">
                        <template #prepend>服务</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="卡片:">
                    <el-select v-model="formData.cards" placeholder="请选择卡片" multiple>
                        <el-option v-for="item in cards" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer class="swiper-detail-footer">
            <el-button @click="handelCancel">{{ cancelText }}</el-button>
            <el-button type="primary" v-if="showSave" @click="handelSubmit">保存</el-button>
        </el-footer>
    </el-container>
</template>
<style scoped lang="less">
.swiper-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.swiper-detail-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.el-input {
    width: 300px;
}
.sub-item {
    display: table;
    margin-bottom: 20px;
}
</style>
